<template>
  <div>
       <a-layout>
    <a-layout-header><i class="iconfont icon-danju"></i> SCL90测试</a-layout-header>
      <a-layout-content>
          <a-row>
             <p class="warn">注意：以下表格列出了有些人可能会有的问题，请仔细阅读每一条，然后根据最近一星期以内下述情况影响你的实际感觉，在5个选项中选择一项。这些问题要求你按自己的实际情况回答，不要猜测怎样才是正确答案。因为这里不存在正确或错误的问题，因此不要花很多时间去想。</p>
          </a-row>
          <a-row>
              <a-col :span="3">
                  <a-row><a-button class='btn_back' type="primary" @click="back"><a-icon type="left" />返回</a-button></a-row>
                  <a-row>
                      <div class="progress">答题进度：<span style="color:blue">{{done_counts}}/90</span>
                      <span id="detail">详情
                          <div class="show">
                              <label>已完成：</label>
                              <ul>
                                  <li v-for="(item,index) in done_index" :key="index">{{item}}</li>
                              </ul>
                              <br>
                              <!-- <hr style="color:gray"> -->
                              <label>未完成：</label>
                              <ul>
                                  <li v-for="(item,index) in undo_index" :key="index">{{item}}</li>
                              </ul>
                          </div>
                          <div class="sj"></div>
                      </span>
                      </div>
                  </a-row>
              </a-col>
              <a-col :offset="4" :span="12">
                  <table class="qt" >
                      <tr v-for="(item,index) in questions.slice(10*(current-1),10*(current-1)+10)" :key="index">
                          <td><strong>{{index+1+10*(current-1)}}.</strong></td>
                          <td >{{item}}</td>
                          <td>
                            <a-radio-group v-model.number="results[index+10*(current-1)]">
                            <a-radio :value="5" >从无</a-radio>
                          <a-radio :value="4" >轻度</a-radio>
                          <a-radio :value="3" >中度</a-radio>
                          <a-radio :value="2" >偏重</a-radio>
                          <a-radio :value="1" >严重</a-radio>
                            </a-radio-group>
                          </td>
                      </tr>
                      <tr><td colspan="3"><a-pagination v-model="current" :total="90" show-less-items /></td></tr>
                  </table>
              </a-col>
          </a-row>
           
      </a-layout-content>
      <a-layout-footer><a-button type="primary" class='commit' @click="submit">提交</a-button></a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
import {request} from '../../api'
import {questions} from './scl' // 90道心理测试题,先暂时写死
export default {
    name:'SCLtest',
    data(){
        return {
            questions,
            results:new Array(90).fill(0),//结果数组,0未作答(不准提交)，5从无，4较轻，3中度,2偏重，1严重
            stu_id:'',
             current: 1,
        }
    },
    created() {
        this.stu_id=window.sessionStorage.getItem('stuToken')
    },
    computed:{
        //已完成的题的数目
        done_counts(){
            return this.results.filter((value)=>{
                return value!==0;
            }).length
        },
        //已完成的题的题号的数组
        done_index(){
            var list=[]
            this.results.forEach((value,index)=>{
                if(value!==0){
                    list.push(index+1)
                }
            })
            return list
        },
        //未完成的题的题号的数组
        undo_index(){
            var list=[]
            this.results.forEach((value,index)=>{
                if(value==0){
                    list.push(index+1)
                }
            })
            return list

        }
    },
    methods: {
        getTime(){
            
             var date=new Date()
                var year=date.getFullYear()+'年'
                var month=(date.getMonth()+1)+'月'
                var day=date.getDate()+'日'
                var hour=date.getHours()+'时'
                var minite=date.getMinutes()+'分'
                var second=date.getSeconds()+'秒'
                return year+month+day+hour+minite+second
        },
        back(){
            this.$router.replace("/stuhome")
        },
        submit(){
            //先判断题是否答完，若有空题阻止提交
            var no=this.results.some((value)=>value==0)
            if(no){
            //   alert("题目未答完，不准提交哦！")
            this.$message.error("题未答完，禁止提交！")
            //   console.log(this.getTime())
            
            }
            else
            {
               request({method:'post',url:'/SCLtest/SCL90_test',
                        data:{id:this.stu_id,type:'scl',
                        test:this.results,time:this.getTime()}}).then((res)=>{
                                if(res.data.message=='success'){
                                    this.$message.success("提交成功！")
                                }
                        })
                        this.$router.replace("/stuhome")
                         
            }
        }
    },
   

}
</script>

<style lang="less" scoped>
li{
    list-style: none;
}
.ant-layout-header{
    background-color: #1890FF;
    color:white;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    position: sticky;
    top:0px;
    z-index: 10;
    text-shadow: 2px 2px 2px rgba(0,0,0,.2);
}
.warn{
    color:red;
    font-size: 16px;
    margin: 15px;
    font-weight: bolder;
    // position: sticky;
    top:50px;
    position: fixed;
    z-index: 10;
    background-color:#f1f2f6
}
.qt{
    margin-top:80px;
    background-color: white;
    font-size: 16px;
    //box-shadow: 10px -10px 10px 10px rgba(0,0,0,.3);
}
.qt tr td{
    padding:11px
}
.qt tr:hover{
    background-color: white;

}
svg{
    margin-left:5px;
}
#img:hover{
    cursor: pointer;
}
#img{
    position:fixed;
    top:150px;
    left:5px;
}
.btn_back{
    margin-top: 80px;
    position: fixed;
}
.progress{
    margin-top: 120px;
    margin-left: 30px;
    width: 400px;
    height:30px;
    border-radius: 15px;
    background-color: white;
   padding-left: 15px;
    font-weight: bold;
    font-style: italic;
    line-height: 30px;
    font-size: 22px;
     position: fixed;
}
hr{
    margin-top:15px ;
    margin-bottom:15px;
}
#detail{
   margin-left:130px;
   color: #0084ff;
   display: inline-block;
   position: relative;
  
}
#detail:hover{
    cursor: pointer;
}
#detail:hover .show{
    display: block;
}
#detail:hover .sj{
    display: block;
}
.show{
    position: absolute;
    padding:20px;
    width:360px;
    height: 500px;
    background-color: white;
    bottom: -530px;
    right:-10px;
    border-radius: 20px;
    display: none;
    label{
        font-size: 16px;
        position: relative;
        color: gray;
    }
}
.sj{
   border-color:transparent  transparent white transparent;
   width: 0;
   height: 0;
   border-style: solid;
   border-width:30px 25px 30px 25px ;
   position: absolute;
   bottom: -35px;
   right: 3px;
   display: none;
}
li{
    float: left;
    width:25px;
    height: 25px;
    line-height: 20px;
    // border:1px solid greenyellow;
    font-size:9px;
    border-radius: 100%;
    margin-left: 6px;
    // color:greenyellow !important;
    text-align: center;
    margin-bottom: 6px;
}
.show ul:nth-of-type(1)>li{
     border:1px solid green;
    color:green !important;
}
.show ul:nth-of-type(2)>li{
     border:1px solid red;
    color:red !important;
}
//清除浮动
ul::after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/deep/.commit{
    margin-left: 800px;
}
.icon-danju{
    font-size: 32px;
}
</style>